<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title><%= title %></title>
    <!--<link rel="stylesheet" href="/assets/css/amazeui.min.css"/>-->
    <link rel="stylesheet" href="/assets/css/amazeui.flat.min.css"/>
    <!--<link rel="stylesheet" href="/css/swiper-3.3.1.min.css"/>-->
    <link rel='stylesheet' href='/css/style.css'/>
</head>
<body>
<div id="particles-js" style="position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;"></div>
<div class="am-container" style="position: relative;z-index: 2">
    <div class="am-g">
        <div class="am-panel-default am-u-sm-4 am-u-xs-4">
            <section class="am-panel am-panel-secondary">
                <header class="am-panel-hd">
                    <h3 class="am-panel-title">个人信息</h3>
                </header>
                <div class="am-panel-bd myUserInfo">
                    <img src="" alt="" class="am-circle">
                    <span id="myId"></span>
                </div>
                <div class="am-panel-footer" style="padding-top: 0;padding-bottom: 0;">
                    <div class="am-g">
                        <button data-am-modal="{target: '#personalInfo'}" class="am-btn am-u-sm-4 am-btn-primary">
                            <span class="am-icon-edit"></span>
                        </button>
                        <button class="am-btn  am-u-sm-4 am-btn-primary" data-am-modal="{target: '#mySearch'}">
                            <span class="am-icon-user-plus"></span>
                        </button>
                        <button class="am-btn am-u-sm-4 am-btn-primary" data-am-modal="{target: '#newSetOrGroup'}">
                            <span class="am-icon-plus"></span>
                        </button>
                    </div>
                </div>
            </section>


            <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="userTab">
                <ul class="am-tabs-nav am-nav am-nav-tabs">
                    <li class="am-active am-u-sm-4 am-text-center"><a href="javascript: void(0)">消息
                            <!--<span class="animate-up-to-down am-badge am-badge-danger am-round">6</span>-->
                        </a></li>
                    <li class="am-u-sm-4 am-text-center"><a href="javascript: void(0)">好友</a></li>
                    <li class="am-u-sm-4 am-text-center"><a href="javascript: void(0)">群组</a></li>
                </ul>

                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active">
                        <ul class="messageList">

                        </ul>
                    </div>
                    <div class="am-tab-panel">
                        <ul class="am-list admin-sidebar-list" id="friendList-collapase">

                        </ul>
                    </div>
                    <div class="am-tab-panel">
                        <ul class="groupList">

                        </ul>
                    </div>
                </div>
            </div>

        </div>

        <div class="am-panel-default  am-u-sm-8 am-u-xs-8">
            <section class=" am-panel am-panel-primary">
                <header class="am-panel-hd" style="position: relative">
                    <h3 class="am-panel-title" id="myNicName">昵称</h3>
                    <span class="am-icon-refresh" style="position: absolute;top: .6rem;right: 1.25rem;cursor: pointer" onclick="refreshRecord()"></span>
                </header>
                <div class="am-panel-bd" id="messageListBox">

                </div>
                <footer class="am-panel-footer">
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group">
                            <div class="am-slider am-slider-default emjoyPanel" id="emjoy-slider">
                                <ul class="am-slides"></ul>
                            </div>
                            <a class="am-btn am-btn-primary" id="selectEmjoy">
                                <i class="am-icon-smile-o"></i>
                            </a>
                        </div>
                        <div class="am-btn-group">
                            <form method="post" enctype="multipart/form-data" id="imgFormId">
                                <input type="file" class="input-cover" name=files>
                                <a class="am-btn am-btn-primary" href="#">
                                    <i class="am-icon-image"></i>
                                </a>
                            </form>
                        </div>
                        <div class="am-btn-group">
                            <form method="post" enctype="multipart/form-data" id="fileFormId">
                                <input type="file" name="files" multiple='mutiple'>
                                <a class="am-btn am-btn-primary" href="#">
                                    <i class="am-icon-file"></i>
                                </a>
                            </form>
                        </div>
                        <div class="am-btn-group" style="float: right;">
                            <a class="am-btn am-btn-primary" href="javascript:downloadChatRecord()">
                                聊天记录下载<i class="am-icon-download"></i>
                            </a>
                        </div>
                    </div>
                </footer>
            </section>
            <div class="am-input-group">
                <input type="text" class="am-form-field" placeholder="请输入聊天内容" id="chatText">
                <span class="am-input-group-label">
                    <a class="am-btn am-btn-primary" href="#" id="sendBtn">
                        <i class="am-icon-send"></i>
                        发送
                    </a>
                </span>
            </div>
        </div>
    </div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="login-model">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">用户登录
            <!--<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>-->
        </div>
        <div class="am-modal-bd">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">用户名</label>
                    <div class="am-u-sm-10">
                        <input type="text" name="username" placeholder="请输入用户名">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">密码</label>
                    <div class="am-u-sm-10">
                        <input type="password" name="password" placeholder="请输入密码">
                    </div>
                </div>

                <div class="am-g">
                    <a type="button" class="am-btn am-btn-secondary am-u-sm-4 am-u-sm-offset-1" href="/register">注册</a>
                    <a type="button" class="am-btn am-btn-primary am-u-sm-4 am-u-sm-offset-1" onclick="login()">登录</a>
                    <a href="/forgetPwd" class="am-align-right" style="padding-top: 10px;">忘记密码?</a>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="personalInfo">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">个人信息修改
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <form class="am-form am-form-horizontal" id="userInfoImg" enctype="multipart/form-data" method="post">
                <div class="am-u-sm-9 am-u-sm-offset-3">
                    <input type="file" name="files">
                </div>
            </form>
            <form class="am-form am-form-horizontal" id="userInfo">
                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">用户id</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="userId" disabled="disabled">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label">用户头像</label>
                    <div class="am-u-sm-9 am-text-left">
                        <img src="/images/shuijiao.jpg" alt="" class="am-circle w-h100px">
                        <input type="text" name="picture">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">昵称</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="nickName" placeholder="请输入昵称">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">生日</label>
                    <div class="am-u-sm-9">
                        <input type="text"2 name="birthday" id="birthday" placeholder="请选择生日" readonly/>
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">地址</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="address" placeholder="请输入地址">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">邮箱</label>
                    <div class="am-u-sm-9">
                        <input type="email" name="email" placeholder="请输入邮箱">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">电话</label>
                    <div class="am-u-sm-9">
                        <input type="tel" name="tel" placeholder="请输入电话">
                    </div>
                </div>

                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label">性别</label>
                    <div class="am-u-sm-9 am-text-left am-margin-top-sm">
                        <input type="radio" name="sex" value="1">男
                        <input type="radio" name="sex" value="2">女
                    </div>
                </div>

                <div class="am-form-group">
                    <div class="am-u-sm-2 am-u-sm-offset-9">
                        <button type="button" class="am-btn am-btn-primary" onclick="saveUserInfo()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="mySearch">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            <div class="am-text-left">
                <select data-am-selected="{btnWidth: '40%', btnSize: 'sm', btnStyle: 'secondary'}" id="mySearchSelect">
                    <option value="1">好友</option>
                    <option value="2">群</option>
                </select>
            </div>
            <div class="am-input-group am-input-group-primary">
                <input type="text" class="am-form-field" placeholder="请输入账号">
                  <span class="am-input-group-btn">
                    <button class="am-btn am-btn-primary" type="button" id="searchById"><span class="am-icon-search"></span></button>
                  </span>
            </div>
            <div class="searchResult am-text-left">

            </div>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="newSetOrGroup">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            <div class="am-text-left">
                <select data-am-selected="{btnWidth: '40%', btnSize: 'sm', btnStyle: 'secondary'}" id="myCreateSelectType">
                    <option value="1">新建分组</option>
                    <option value="2">新建群</option>
                </select>
            </div>
            <div class="am-input-group am-input-group-primary">
                <input type="text" class="am-form-field" placeholder="请输入名称">
                  <span class="am-input-group-btn">
                    <button class="am-btn am-btn-primary" type="button" onclick="createSetOrGroup(this)"><span class="am-icon-plus"></span></button>
                  </span>
            </div>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="changeName">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            <span>名称</span>
            <div class="am-input-group am-input-group-primary">
                <input type="text" class="am-form-field" placeholder="请输入名称">
                  <span class="am-input-group-btn">
                    <button class="am-btn am-btn-primary" type="button" onclick="changeName()"><span class="am-icon-save"></span></button>
                  </span>
            </div>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="changeFriendSet">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            <div class="am-align-left">
               修改分组
            </div>
            <select data-am-selected="{btnWidth: '40%', btnSize: 'sm', btnStyle: 'secondary'}" id="changeFriendSetSelect">
            </select>
            <button class="am-btn am-btn-primary am-align-right" type="button" onclick="changeFriendSet()"><span class="am-icon-save"></span></button>
        </div>
    </div>
</div>
<div class="mouseRightClick" id="friendRightClick">
    <div class="am-btn-group-stacked">
        <button type="button" class="am-btn am-btn-secondary" onclick="sendFriendMsg()">发送消息</button>
        <button type="button" class="am-btn am-btn-secondary" onclick="showFriendInfo()">查看资料</button>
        <button type="button" class="am-btn am-btn-secondary" onclick="changeSet()">更换分组</button>
        <button type="button" class="am-btn am-btn-secondary" onclick="deleteFriend()">删除好友</button>
    </div>
</div>
<div class="mouseRightClick" id="groupRightClick">
    <div class="am-btn-group-stacked">
        <button type="button" class="am-btn am-btn-secondary" onclick="sendGroupMsg()">发送消息</button>
        <button type="button" class="am-btn am-btn-secondary" onclick="changeGroupNameClick()">修改名称</button>
        <button type="button" class="am-btn am-btn-secondary" onclick="exitGroup()">退出群组</button>
    </div>
</div>
<div class="mouseRightClick" id="setRightClick">
    <div class="am-btn-group-stacked">
        <button type="button" class="am-btn am-btn-secondary" onclick="changeSetName()">修改名称</button>
        <button type="button" class="am-btn am-btn-secondary" onclick="deleteSet()">删除群组</button>
    </div>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="friendInfo">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            <form class="am-form am-form-horizontal" id="userInfo">
                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">用户id</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="userId" disabled="disabled">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label">用户头像</label>
                    <div class="am-u-sm-9 am-text-left">
                        <img src="/images/shuijiao.jpg" alt="" class="am-circle w-h100px">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">昵称</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="nickName" placeholder="" disabled="disabled">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">生日</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="birthday" placeholder=""  disabled="disabled"/>
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">地址</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="address" placeholder="" disabled="disabled">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">邮箱</label>
                    <div class="am-u-sm-9">
                        <input type="email" name="email" placeholder="" disabled="disabled">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-pwd-2" class="am-u-sm-3 am-form-label">电话</label>
                    <div class="am-u-sm-9">
                        <input type="tel" name="tel" placeholder="" disabled="disabled">
                    </div>
                </div>

                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label">性别</label>
                    <div class="am-u-sm-9 am-text-left am-margin-top-sm" name="sex">
                        男
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<canvas id="myCanvas" style="display: none"></canvas>
</body>
<script src="/js/socket.io.js"></script>
<script src="/js/jquery.js"></script>
<script src="/assets/js/amazeui.min.js"></script>
<script src="/js/emjoyHandle.js"></script>
<script src="/js/socketHandle.js"></script>
<script src="/js/MessageHandle.js"></script>
<script src="/js/fileHandle.js"></script>
<script src="/js/ListHandle.js"></script>
<script src="/js/particles-js.js"></script>
<script src="/js/index.js"></script>
</html>
